<template>
  <div class="userInfo">
    <van-nav-bar
      title="个人信息"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />

    <van-cell-group>
      <input
        ref="file"
        type="file"
        accept="image/*"
        hidden
        @change="onAvatar"
      />
      <van-cell title="头像" is-link center @click="$refs.file.click()">
        <van-image
          width="30"
          height="30"
          round
          fit="cover"
          :src="user.avatar"
        />
      </van-cell>
      <van-cell
        title="昵称"
        is-link
        :value="user.nickname"
        @click="isNameShow = true"
      ></van-cell>
      <van-cell
        title="性别"
        is-link
        :value="user.gender === 0 ? '女' : '男'"
        @click="isGenderShow = true"
      ></van-cell>
      <van-cell
        title="生日"
        is-link
        :value="user.birthday | datetime('YYYY-MM-DD')"
        @click="isBirthdayShow = true"
      ></van-cell>
    </van-cell-group>

    <!-- 修改头像 -->
    <van-popup class="avatar-popup" v-model="isAvatarShow" position="bottom">
      <UpdateAvatar
        v-if="isAvatarShow"
        :file="previewImg"
        :username="user.username"
        @update-avatar="user.avatar = $event"
        @colose-avatar="isAvatarShow = false"
      />
    </van-popup>
    <!-- 修改昵称弹窗 -->
    <van-popup class="name-popup" v-model="isNameShow" position="bottom">
      <!-- :name="user.nickname"
      @update-name="user.nickname = $event"
         -->
      <UpdateName
        v-if="isNameShow"
        v-model="user.nickname"
        @colose-name="isNameShow = false"
      />
    </van-popup>
    <!-- 修改性别弹窗 -->
    <van-popup class="gender-popup" v-model="isGenderShow" position="bottom">
      <!-- :name="user.nickname"
      @update-name="user.nickname = $event"
         -->
      <UpdateGender
        v-if="isGenderShow"
        v-model="user.gender"
        @colose-gender="isGenderShow = false"
      />
    </van-popup>
    <!-- 修改生日 -->
    <van-popup
      class="birthday-popup"
      v-model="isBirthdayShow"
      position="bottom"
    >
      <!-- :name="user.nickname"
      @update-name="user.nickname = $event"
         -->
      <UpdateBirthday
        v-if="isBirthdayShow"
        v-model="user.birthday"
        @colose-birthday="isBirthdayShow = false"
      />
    </van-popup>
  </div>
</template>
<script>
import { getUserInfo } from '@/api/user'
import UpdateName from './components/update-name'
import UpdateGender from './components/update-gender'
import UpdateBirthday from './components/update-birthday'
import UpdateAvatar from './components/update-avatar'
export default {
  name: 'UserInfo',
  data () {
    return {
      user: {},
      isAvatarShow: false,
      isNameShow: false,
      isGenderShow: false,
      isBirthdayShow: false,
      previewImg: null
    }
  },
  created () {
    this.getUser()
  },
  methods: {
    async getUser () {
      const { data } = await getUserInfo()
      this.user = data.data
    },
    onAvatar () {
      this.isAvatarShow = true
      // const blob = window.URL.createObjectURL(this.$refs.file.files[0])
      const blob = this.$refs.file.files[0]
      this.previewImg = blob
      this.$refs.file.value = ''
    }
  },
  components: { UpdateName, UpdateGender, UpdateBirthday, UpdateAvatar },
  props: {},
  watch: {},
  computed: {},
  mounted () {}
}
</script>

<style lang="less" scoped>
.userInfo {
  background-color: #fbfdff;
  .name-popup {
    min-height: 100%;
    background-color: #f5f5f5;
    /deep/.van-nav-bar {
      background-color: white;
      .van-nav-bar__title {
        color: black;
      }
    }
  }
  .birthday-popup,
  .gender-popup {
    min-height: 100%;
  }
  .avatar-popup {
    background-color: black;
    min-height: 100%;
  }
}
</style>
